<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

const props = defineProps({
  factories: {
    type: Array,
    default: function () {
      return [];
    },
  },
});

const router = useRouter();
const onLook = (factoryId) => {
  router.push("/operation/factory/" + factoryId);
};
</script>

<template>
  <div id="container">
    <el-table :data="props.factories" height="220" style="width: 92%">
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="factoryName" label="水厂"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button @click="onLook(row.id)" type="danger" size="small"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  padding: 5px;
}
</style>